import React, { useState, useEffect } from "react";
import { Button, Tag, Table } from "antd";
import "./css/vehicleStatistics.scss";
import { DollarTwoTone, RightOutlined } from "@ant-design/icons";
import ReactEcharts from "echarts-for-react";
import "echarts-liquidfill/src/liquidFill.js";
// 每条数据接口类型
interface Item {
  id: string;
  vehicleModelImg: string;
  vehicleModelDesc: string;
  rent: number;
  evaluate: number;
  rentalDays: number;
  rentalKilometers: number;
  orderNum: number;
  occupancyRate: number;
}

const { CheckableTag } = Tag;

// table数据切换
const tagsData = ["总计", "本月", "本周"];

export default function Orders() {
  // 颜色
  const colors = ["purple", "green", "blue", "orange"];
  // vehicleTypeOption 在租车辆占比
  const vehicleProportionOption = {
    series: [
      {
        type: "liquidFill",
        data: [0.6, 0.5, 0.4, 0.3],
        backgroundColor: {
          // color: "rgba(140,168,247,0.8)",
        },
        radius: 100,
        center: ["50%", "45%"],
        label: {
          normal: {
            textStyle: {
              fontSize: 24, // 设置文字大小为24
            },
          },
        },
        // color: "rgba(147, 185, 249,0.8)", // 水球颜色
        outline: {
          borderDistance: 0, // 描边间距
          itemStyle: {
            borderWidth: 5, // 描边宽度
            borderColor: "#156ACF", // 描边颜色
            shadowBlur: 20, // 阴影范围
            shadowColor: "rgba(30, 144, 255, 0.5)", // 阴影颜色
          },
        },
      },
    ],
    grid: {
      // width: 700,
      // height: '50%'
    },
  };
  // option 出租车辆类型
  const vehicleTypeOption = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      // position: "right",
      left: "50%",
      // right: "left",
      bottom: "8%",
      icon: "circle", //设置分类图标形状
      itemHeight: 9, //图例图标的高度
      itemWidth: 9, //图例图标的宽度
      itemGap: 10, //图例图标与文字间的间距
      textStyle: {
        fontSize: 10, //图例文字字体大小
        color: "#8A90A3", //图例文字颜色
      },
    },
    series: [
      {
        name: "出租车辆类型",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["25%", "45%"],
        roseType: "area",
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 735, name: "旅游车 4.5%" },
          { value: 735, name: "商务车 11.1%" },
          { value: 735, name: "跑车 11.2%" },
          { value: 735, name: "三厢 14.9%" },
          { value: 580, name: "两厢 20.9%" },
          { value: 804, name: "SUV 85.7%" },
        ],
      },
    ],
  };
  // option 变速箱类型
  const vehicleGearboxOptions = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      left: "52%",
      top: "36%",
      icon: "circle", //设置分类图标形状
      itemHeight: 9, //图例图标的高度
      itemWidth: 9, //图例图标的宽度
      itemGap: 10, //图例图标与文字间的间距
      textStyle: {
        fontSize: 10, //图例文字字体大小
        color: "#8A90A3", //图例文字颜色
      },
    },
    series: [
      {
        name: "出租车辆类型",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["25%", "45%"],
        label: {
          show: false,
          position: "right",
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 257, name: "自动挡 25.7%" },
          { value: 743, name: "手动挡 74.3%" },
        ],
      },
    ],
    grid: {
      bottom: "10%",
    },
  };

  // 车型数据
  const [dataSource, setDataSource] = useState<Item[]>([]);
  // 列表字段
  const defaultColumns = [
    {
      title: "车型",
      dataIndex: "vehicleModelImg",
      width: "30%",
      editable: true,
    },
    {
      title: "租金",
      dataIndex: "rent",
    },
    {
      title: "评价",
      dataIndex: "evaluate",
    },
    {
      title: "出租天数",
      dataIndex: "rentalDays",
    },
    {
      title: "出租公里数",
      dataIndex: "rentalKilometers",
    },
    {
      title: "订单量",
      dataIndex: "orderNum",
    },
    {
      title: "出租率",
      dataIndex: "occupancyRate",
    },
  ];

  // 获取数据
  useEffect(() => {
    setDataSource([
      {
        id: "0",
        vehicleModelImg: "Edward King 0",
        vehicleModelDesc: "32",
        rent: 100,
        evaluate: 10,
        rentalDays: 10,
        rentalKilometers: 10,
        orderNum: 10,
        occupancyRate: 10,
      },
      {
        id: "1",
        vehicleModelImg: "Edward King 0",
        vehicleModelDesc: "32",
        rent: 100,
        evaluate: 10,
        rentalDays: 10,
        rentalKilometers: 10,
        orderNum: 10,
        occupancyRate: 10,
      },
      {
        id: "2",
        vehicleModelImg: "Edward King 0",
        vehicleModelDesc: "32",
        rent: 100,
        evaluate: 10,
        rentalDays: 10,
        rentalKilometers: 10,
        orderNum: 10,
        occupancyRate: 10,
      },
      {
        id: "3",
        vehicleModelImg: "Edward King 0",
        vehicleModelDesc: "32",
        rent: 100,
        evaluate: 10,
        rentalDays: 10,
        rentalKilometers: 10,
        orderNum: 10,
        occupancyRate: 10,
      },
    ]);
  }, []);

  const columns = defaultColumns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: () => ({
        title: col.title,
      }),
    };
  });

  // tag的初始值
  const [selectedTags, setSelectedTags] = useState(["总计"]);
  // 切换数据类型
  const handleChange = (tag: string, checked: boolean) => {
    const nextSelectedTags = checked
      ? [tag]
      : selectedTags.filter((t) => t !== tag);
    console.log("You are interested in: ", nextSelectedTags);
    setSelectedTags(nextSelectedTags);
  };

  return (
    <div className="vehicle-statistics-container">
      <div className="vehicle-statistic-header">
        <div className="vehicle-statistic-header-left">
          <div className="left-top">
            <div className="vehicle-fleet">
              <DollarTwoTone className="vehicle-fleet-icon" />
              <p className="vehicle-fleet-num">324</p>
              <p className="vehicle-fleet-font">车辆总数</p>
            </div>
            <div className="vehicle-data-refinement">
              <div className="total-all-vehicle">
                <div className="total-all-vehicle-item">
                  <p className="total-font">今日下单量</p>
                  <p className="total-num">58</p>
                  <p
                    className="right-one"
                    style={{ border: `2px solid ${colors[0]}` }}
                  ></p>
                </div>
                <div className="total-all-vehicle-item">
                  <p className="total-font">今日成交金额</p>
                  <p className="total-num">1566.00</p>
                  <p
                    className="right-one"
                    style={{ border: `2px solid ${colors[1]}` }}
                  ></p>
                </div>
                <div className="total-all-vehicle-item">
                  <p className="total-font">本月下单量</p>
                  <p className="total-num">158</p>
                  <p
                    className="right-one"
                    style={{ border: `2px solid ${colors[2]}` }}
                  ></p>
                </div>
                <div className="total-all-vehicle-item">
                  <p className="total-font">本月成交金额</p>
                  <p className="total-num">11866.00</p>
                  <p
                    className="right-one"
                    style={{ border: `2px solid ${colors[3]}` }}
                  ></p>
                </div>
              </div>
            </div>
          </div>
          <div className="left-bottom">
            <div className="left-bottom-echarts">
              <div className="vehicleProportionOption">
                <ReactEcharts
                  option={vehicleProportionOption}
                  style={{ height: 150 }}
                  className="bottom-echart"
                />
                <p>在租车辆占比</p>
              </div>
              <div className="vehicleTypeOption">
                <ReactEcharts
                  option={vehicleTypeOption}
                  style={{ height: 150 }}
                  className="bottom-echart"
                />
                <p>出租车辆类型</p>
              </div>

              <div className="vehicleGearboxOptions">
                <ReactEcharts
                  option={vehicleGearboxOptions}
                  style={{ height: 150 }}
                  className="bottom-echart"
                />
                <p>变速箱类型</p>
              </div>
            </div>
          </div>
        </div>
        <div className="vehicle-statistic-header-right">
          {/* 待年检车辆 */}
          <div className="wait-annual-inspection-vehicle">
            <p className="wait-annual-inspection-vehicle-title">
              <span>待年检车辆</span>
              <span>
                查看更多
                <RightOutlined />
              </span>
            </p>
            <div className="wait-annual-inspection-vehicle-content">
              <div className="vehicle-base-message">
                迈凯伦540C/自动挡/硬顶超跑车/3.8T/2座/2019款/Coupe
              </div>
              <div className="license-plate">晋A.123456</div>
            </div>
          </div>
          {/* 待保养车辆 */}
          <div className="wait-upkeep-vehicle">
            <p className="wait-upkeep-vehicle-title">
              <span>待保养车辆</span>
              <span>
                查看更多
                <RightOutlined />
              </span>
            </p>
            <div className="wait-upkeep-vehicle-content">
              <div className="vehicle-base-message">
                迈凯伦540C/自动挡/硬顶超跑车/3.8T/2座/2019款/Coupe
              </div>
              <span className="license-plate">晋A.123456</span>
            </div>
          </div>
          {/* 异地停靠 */}
          <div className="off-site-call-vehicle">
            <p className="off-site-call-vehicle-title">
              <span>异地停靠</span>
              <span>
                查看更多
                <RightOutlined />
              </span>
            </p>
            <div className="off-site-call-vehicle-content">
              <div className="vehicle-base-message">
                迈凯伦540C/自动挡/硬顶超跑车/3.8T/2座/2019款/Coupe
              </div>
              <span className="license-plate">晋A.123456</span>
            </div>
          </div>
        </div>
      </div>
      <div className="vehicle-statistic-footer">
        <div className="vehicle-statistic-footer-title">
          <div className="vehicle-statistics">
            <span className="vehicle-statistics-font">车辆统计</span>
            <div className="vehicle-statistics-btns">
              {tagsData.map((tag) => (
                <CheckableTag
                  key={tag}
                  checked={selectedTags?.includes(tag)}
                  onChange={(checked) => handleChange(tag, checked)}
                >
                  {tag}
                </CheckableTag>
              ))}
            </div>
          </div>
          <div className="vehicle-statistics-export">
            <Button type="primary">导出</Button>
          </div>
        </div>
        <Table
          dataSource={dataSource}
          columns={columns}
          className="vehicle-statistics-data"
          scroll={{
            y: 120,
          }}
          pagination={false}
        />
      </div>
    </div>
  );
}
